var prefix = "/approval";
var dataFlag = false;
$(function() {
    $('#dataTable').attr('data-height','100%-26');
	load();

    $("#userInput").autocomplete({
        minLength: 2,
        source: function( request, response ) {
            $.ajax({
                method:'post',
                url: "/employee/empSearch/findByFullName",
                dataType: "json",
                data:{
                    fullName: $("#userInput").val().trim().toLowerCase()
                },
                success: function(data) {
                    response( $.map(data,function(item) {
                        return {
                            label: item.empNm+'  '+item.empJob,
                            value: item.empMail,
                            empId:item.empId,
                            empNm:item.empNm,
                            empDept:item.empDept,
                            empJob:item.empJob,
                            empManager:item.empManager,
                            empMail:item.empMail
                        }

                    }));
                }
            });
        },

        create: function() {
            $(this).data('ui-autocomplete')._renderItem = function (ul,item){
                return $( "<li>" )
                    .append( "<dl  class='searchedUerList'  >"+
                        "<dt>"+
                        "<span>"+item.label+"</span>"+
                        "</dt>"+
                        "<dd>"+
                        "<img class='searchedUerIcon' src='/img/approval/user_icon.jpg' >"+
                        "</dd>"+
                        "<dd>"
                        +item.empMail+
                        "</dd>"+
                        "</dl> ")
                    .appendTo( ul );
            };
        },

        _renderMenu: function( ul, items ) {
            var that = this;
            $.each( items, function( index, item ) {
                that._renderItemData( ul, item );
            });
            $( ul ).find( "li:odd" ).addClass( "odd" );
        },

        _resizeMenu: function() {
            this.menu.element.outerWidth( 500 );
        },

        select: function ( event, ui ) {
            var exist = false;
            $('#userList li').each(function () {
                if ($(this).find("[id='seq']").data('mail') == ui.item.empMail) {
                    layer.alert(ui.item.empNm + ui.item.empMail +'<br>Duplicate user found. Please delete the duplicate user.');
                    exist = true;
                    return false;
                }
            });
            if (exist == false) {
                var seq_last = parseInt($("#userList li:last-child ").index());
                $("#userList").append(
                    "<li class='singleApp'>" +
                    "<span id='seq' data-mail='" + ui.item.empMail + "'>" + (seq_last + 1) + "</span>" +
                    "<button id='appBtn' class='type_button active' title='Approval' value ='1' >Appr</button>" +
                    "<button id='conBtn' class='type_button' title='Consent' value ='2'>Cons</button>" +
                    "<button id='notiBtn' class='type_button' title='Notification' value ='9'>Noti</button>" +
                    "<span id='postAppr' class='post_appr'  value ='3' style='display:none'>Post approval</span>" +
                    "<span id='paraAppr' class='para_appr'  value ='7' style='display:none'>Parallel approval</span>" +
                    "<span id='paraCon' class='para_con'  value ='4' style='display:none'>Parallel consent</span>" +
                    "<p>" + ui.item.empNm + '/' + ui.item.empJob + "</p>" +
                    "<input type='hidden' id='empId' value='" + ui.item.empId + "'/>" +
                    "<span id='operation' class='appOperation'><i class='fa fa-times'></i></span>" +
                    "<span id='arbDecision' class='appOperation' title='Arbitrary decision'><i class='fa fa-gavel'></i></span>" +
                    "<span id='editText' class='appOperation'title='Edit text'><i class='fa fa-pencil'></i></span>" +
                    "<span id='changeLine' class='appOperation' title='Change line'><i class='fa fa-user'></i></span>" +
                    "</li>"
                );
                wrapper.totalLines ++;
                $(".save_line_body").height($(".save_line_body").height() + $("#userList li:last-child").outerHeight(true));

                reorder();//公共排序方法
            }
        },

        open: function() {
            $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
        },

        close: function() {
            $("#userInput").val('');
        },

        classes: {
            "ui-autocomplete": "highlight"
        },
        delay:800
    });

    //选定当前审批人
    $('#userList').on('click','li',function(){
        if(event.ctrlKey){
            if ($(this).attr('class')=='singleApp picked'){
                $(this).removeClass('picked');
            }
            else{
                $(this).addClass('picked');
            }
        }
        else{
            //将选中的class设置为.singleApp.picked，其余为原来
            $(this).addClass('picked').siblings().removeClass('picked');
        }
        $("#userList li:first-child").removeClass('picked')
    });

    //改变当前审批人角色
    $("#userList").on('click', '.type_button', function(){
        var title = $(this).attr('title');
        switch (title) {
            case 'Approval':
                $(this).addClass('active').siblings('button').attr('class','type_button');
                $(this).parent().find('.appOperation').removeClass('clicked').show();
                break;
            case 'Consent':
                $(this).addClass('active').siblings('button').attr('class','type_button');
                $(this).parent().find("[id='arbDecision']").addClass('clicked').show();
                $(this).parent().find("[id='editText']").removeClass('clicked').show();
                $(this).parent().find("[id='changeLine']").removeClass('clicked').show();
                break;
            case 'Notification':
                $(this).addClass('active').siblings('button').attr('class','type_button');
                $(this).parent().find('.appOperation').not('#operation').addClass('clicked').hide();
                break;
        }

        reorder();
    });

    //批量改变选中的审批人角色
    $("#RoleChangeBtn").on('click', '.icon_button', function(){
        cancelPara();

        $('#userList .picked').find('.post_appr').removeClass('active').hide();
        $('#userList .picked').find('.para_appr').removeClass('active').hide();
        $('#userList .picked').find('.para_con').removeClass('active').hide();
        $('#userList .picked').find('.type_button').show();

        var roleTitle = $(this).attr('title');
        switch (roleTitle) {
            case 'Approval':
                $('#userList .picked').find("[id='appBtn']").addClass('active').siblings('button').attr('class','type_button');
                $('#userList .picked').find('.appOperation').removeClass('clicked').show();
                break;
            case 'Consent':
                $('#userList .picked').find("[id='conBtn']").addClass('active').siblings('button').attr('class','type_button');
                $('#userList .picked').find("[id='arbDecision']").addClass('clicked').show();
                $('#userList .picked').find("[id='editText']").removeClass('clicked').show();
                $('#userList .picked').find("[id='changeLine']").removeClass('clicked').show();
                break;
            case 'Notification':
                $('#userList .picked').find("[id='notiBtn']").addClass('active').siblings('button').attr('class','type_button');
                $('#userList .picked').find('.appOperation').not('#operation').addClass('clicked').hide();
                break;
        }

        reorder();
    });

    //后批角色
    $("#PostRoleBtn").on('click',function () {
        cancelPara();

        $('#userList .picked').find('.type_button').removeClass('activeHide').removeClass('active').hide();
        $('#userList .picked').find('.para_appr').removeClass('active').hide();
        $('#userList .picked').find('.para_con').removeClass('active').hide();
        $('#userList .picked').find('.post_appr').addClass('active').show();
        $('#userList .picked').find('.appOperation').not('#operation').addClass('clicked').hide();

        reorder();
    });

    //平行角色
    $("#ParRoleBtn").on('click',function () {
        var count= $('#userList .picked').size();
        if (count < 2){
            layer.msg('Please select 2 or more parallel approvers.');
            return;
        }else{
            $('#userList').find('.activeHide').addClass('active');//取消平行时，根据为activeHide的，转化为原来的active。
            $('#userList').find('.type_button.active').show().siblings('button').show();
            $('#userList').find('.para_appr').removeClass('active').hide();
            $('#userList').find('.para_con').removeClass('active').hide();
        }

        $('#userList .picked').each(function () {
            var $Role =$(this).find('.active').attr('title');
            if($Role != 'Approval' && $Role != 'Consent' )
            {
                layer.msg('Parallel can be specified only by the approver or consenter.');
                cancelPara();
                return false;
            }

            var $Role =$(this).find('.active').attr('title');
            if($Role == 'Approval'){
                $(this).find('.type_button').removeClass('active').hide();
                $(this).find("[id='appBtn']").addClass('activeHide');  //将其激活状态隐藏，取消平行时根据哪个为hide再重新激活至原先的角色
                $(this).find('.para_appr').addClass('active').show();
                $(this).find('.appOperation').removeClass('clicked');
            }
            else if($Role == 'Consent'){
                $(this).find('.type_button').removeClass('active').hide();
                $(this).find("[id='conBtn']").addClass('activeHide');
                $(this).find('.para_con').addClass('active').show();
                $(this).find("[id='arbDecision']").addClass('clicked');
                $(this).find("[id='editText']").removeClass('clicked');
                $(this).find("[id='changeLine']").removeClass('clicked');
            }
        });

        reorder();
    });

    //取消平行
    $("#CancelParBtn").on('click',function () {
        cancelPara();
        reorder();
    });

    //审批人上移
    $("#top_arrow").on("click",function () {
        $('#userList .picked').each(function () {
            var index = $(this);
            var seq = parseInt($(this).find('span').eq(0).text());
            if($(this).prevAll().length>1){
                var preClass = index.prev().find('.active').attr('class');
                if(preClass == 'para_appr active' || preClass == 'para_con active') {//上面的第一个元素是平行
                    var indexClass = index.find('.active').attr('class')
                    if (indexClass == 'para_appr active' || indexClass == 'para_con active' ){//点击的也是平行，即平行之间互换
                        index.prev().before(index);
                    }else{//上面的第一个元素是平行，点击的是非平行
                        var paraAppCount= $('#userList').find('.para_appr.active').size();
                        var paraConCount= $('#userList').find('.para_con.active').size();
                        var totalPara = paraAppCount + paraConCount;
                        index.prevAll().eq(totalPara-1).before(index);
                    }
                }else{
                    index.prev().before(index);
                }
            }
        });
        reorder();
    });

    //审批人下移main_font_right
    $("#bottom_arrow").on("click",function () {
        $('#userList .picked').each(function () {
            var index = $(this);
            if($(this).prevAll().length > 0 && $(this).nextAll().length > 0){
                var indexClass = index.find('.active').attr('class')
                var nextClass = index.next().find('.active').attr('class');
                if(nextClass == 'para_appr active' || nextClass == 'para_con active' ){
                    if(indexClass == 'para_appr active' || indexClass == 'para_con active'){
                        index.next().after(index);
                    }else{
                        index.nextAll().find('.para_con.active,.para_appr.active').parent('li').first().after(index);
                    }
                }else{
                    if(indexClass == 'para_appr active' || indexClass == 'para_con active'){//
                        index.prevAll().find('.para_appr.active,.para_con.active').parent('li').first().before(index.next());
                    }else{
                        index.next().after(index);
                    }
                }
            }
        });
        reorder();
    });

    //单个审批人删除
    $("#userList").on('click', '#operation', function(){
        $(".save_line_body").height($(".save_line_body").height() - $("#userList li:last-child").outerHeight(true));
        $(this).parent('li').remove();
        wrapper.totalLines --;
        cancelPara()
        reorder();
    });

    //多个审批人删除
    $("#deleteApp").on('click', function(){
        var deleteHeight = 0;
        $('#userList .picked').each(function () {
            deleteHeight = deleteHeight+ $(this).outerHeight(true);
            wrapper.totalLines --;
        })
        $(".save_line_body").height($(".save_line_body").height() - deleteHeight);
        $('#userList .picked').remove();
        cancelPara();
        reorder();
    });

    //单个审批人权限设置
    $("#userList").on('click', '.appOperation', function(){
        if($(this).attr('class')=='appOperation clicked'){
            $(this).removeClass('clicked');
        }else{
            $(this).addClass('clicked');
        }
    });

	$(".fixed-table-loading").remove();
    $("#deleteLine").bind("click",batchRemove);
    $("#addNewLine").bind("click",addNewLine);
	$("#collapseBtn").bind("click",collapseBox);
    $("#saveCurrentLine").bind("click",saveCurrentLine);
    $("#searchName").bind("keypress",searchEvent);
    $(".main_search span").bind("click",clickSearchEvent);
});

var wrapper = new Vue({
    el : '#content',
    data : {
        total:0,
        totalLines : 0
    }
})

function load() {
    $(".pull-left.pagination-detail").remove();
	$('#dataTable').bootstrapTable({
		method : 'get', // 服务器数据的请求方式 get or post
		url : prefix + '/line/listSavedLines', // 服务器数据的加载地址
        cache: false,
		//	showRefresh : true,
		//	showToggle : true,
		//locale: "zh-CN",
		locale: "en-US",
		iconSize : 'outline',
		toolbar : '#exampleToolbar',
		striped : false, // 设置为true会有隔行变色效果
		dataType : "json", // 服务器返回的数据类型
		pagination : false, // 设置为true会在底部显示分页条
		// queryParamsType : "limit",
		// //设置为limit则会发送符合RESTFull格式的参数
		singleSelect : false, // 设置为true将禁止多选
		// contentType : "application/x-www-form-urlencoded",
		// //发送到服务器的数据编码类型
		pageSize : 100, // 如果设置了分页，每页数据条数
		pageNumber : 1, // 如果设置了分页，首页页码
		//search : true, // 是否显示搜索框
		showColumns : false, // 是否显示内容下拉框（选择显示的列）
		sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者 "server"
		queryParams : function(params) {
			return {
				//说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
				lineName : $('#searchName').val(),
				isDelete:'N',
				orderBy:'create_date desc'
			};
		},
		onPostBody: function () {
            //改变复选框样式
            $("#dataTable").find("input:checkbox").each(function (i) {
                var $check = $(this);
                if ($check.attr("id") && $check.next("label")) {
                    return;
                }
                var name = $check.attr("name");
                var id = name + "-" + i;
                var $label = $('<label for="'+ id +'"></label>');
                $check.attr("id", id).parent().addClass("bella-checkbox").append($label);
            }); 
		},
		onClickRow: function(row) {
            showLineDetail(row.lineId,row.lineName);
		},
		onLoadSuccess:function(data) {
            wrapper.total = data.total;
            if (data.total <= 13) {
                $(".fixed-table-pagination").hide();
            }
		},
		onCheck:function(row){
			showLineDetail(row.lineId,row.lineName);
		},
		columns : [
			{
				checkbox : true,
				class:'bella-checkbox',
				width: '30px'
			},
			{
				field : 'lineId',
				title : 'ID',
				visible: false
			},
			{
				field : 'lineName',
				title : 'Line name'
			} ]
	});
}

function searchEvent() {
    if(event.keyCode == "13"){
        var opt = {
            query : {
                lineName: $("#searchName").val().trim(),
                isDelete:'N',
                orderBy:'create_date desc'
            }
        }
        $('#dataTable').bootstrapTable('refresh', opt);
        pageInit = $('#dataTable').bootstrapTable('getOptions').pageNumber + 1;
    }
}

function clickSearchEvent() {
    var opt = {
        query: {
            lineName: $("#searchName").val().trim(),
            isDelete:'N',
            orderBy:'create_date desc'
        }
    }
    $('#dataTable').bootstrapTable('refresh', opt);
    pageInit = $('#dataTable').bootstrapTable('getOptions').pageNumber + 1;
}

function batchRemove() {
    var rows = $('#dataTable').bootstrapTable('getSelections'); // 返回所有选择的行，当没有选择的记录时，返回一个空数组
    if (rows.length == 0) {
        layer.msg("Please select data");
        return;
    }

    //询问框
    layer.confirm('Are you sure to delete the selected &nbsp;' + rows.length + ' data?', {
        shade: 0,
        title:'Notification',
        btn: ['Yes','No']
    }, function(){
        var ids = new Array();
        // 遍历所有选择的行数据，取每条数据对应的ID
        $.each(rows, function(i, row) {
            ids[i] = row['lineId'];
        });
        $.ajax({
            type : 'POST',
            data : {
                "ids" : ids
            },
            url : prefix + '/line/batchRemove',
            success : function(r) {
                layer.closeAll('dialog');
                if (r.code == 0) {
                    reLoad();
                    $('#centerDetail').hide();
                }
                layer.msg(r.msg);
            }
        })
    }, function(){

    });
}

function addNewLine() {

    $(".set_right_title").val("");
    $("#selected").show();
    $("#centerDetail").show();
    $("#userList .singleApp").remove();
    $(".save_line_body").height(70);
    $(".detailBody").show();
    $("#lineIdSpan").text("");

    let animal = JSON.parse(sessionStorage.getItem("howAreYou"));
    $('#userList').append(
        "<li class='singleApp'>" +
        "<span id='seq' data-mail='" + animal.empMail + "'>0</span>" +
        "<button id='draftBtn' class='draftBtn active' value ='0' >Draft</button>" +
        "<p>" + animal.empNm  + '/' + animal.hrJobNm + "</p>" +
        "<input type='hidden' id='empId' value='" + animal.empId + "'/>" +
        "</li>"
    );
}

function collapseBox(){
	$(this).children('.fa-arrow-left').toggleClass('hidden');
	$(this).children('.fa-arrow-right').toggleClass('hidden');
	
	var p = $("#content").layout("panel", "west")[0].clientWidth;
    if (p > 0){
        $('#content').layout('collapse', 'west');       
        $(this).attr("title","Reduce view window");
    }
    else{
    	 $('#content').layout('expand', 'west');
    	$(this).attr("title","Expand view window");
    }
}

function saveCurrentLine(){
    var lineName=$(".set_right_title").val();
    if(!lineName){
        layer.msg('Please enter line name');
        return;
    }

    if($("#userList li").length === 1){
        layer.msg('Please select approver');
        return;
    }

    var formData = new FormData();
    formData.append('lineName', lineName);

    formData.append('lineId', $("#lineIdSpan").text());


    $("#userList .singleApp").each(function (i) {
        formData.append('getAapTaplnVOList['+i+'].apRelrEpid',$(this).find("[id='empId']").val());
        formData.append('getAapTaplnVOList['+i+'].apRlCd',$(this).find(".active").attr("value"));
        formData.append('getAapTaplnVOList['+i+'].apSeq',$(this).find("[id='seq']").text());
        formData.append('getAapTaplnVOList['+i+'].arbPmtYn',$(this).find("[id='arbDecision']").attr('class')==='appOperation clicked' ? 'N' : 'Y');
        formData.append('getAapTaplnVOList['+i+'].txtMdfyPmtYn',$(this).find("[id='editText']").attr('class')==='appOperation clicked' ? 'N' : 'Y');
        formData.append('getAapTaplnVOList['+i+'].pathMdfyPmtYn',$(this).find("[id='changeLine']").attr('class')==='appOperation clicked' ? 'N' : 'Y');
    })

    if(!$("#lineIdSpan").text()){
        layer.confirm('Are you sure to save &nbsp; "' + lineName + '"“”?', {
            shade: 0,
            closeBtn: 0,
            title:'Notification',
            btn: ['Yes','No'] //按钮
        }, function(){
            $.ajax({
                url : prefix + '/lineDetail/save',
                type : "post",
                data:formData,
                processData: false,  // 关键点
                contentType: false,  // 关键点
                success : function(r) {
                    layer.closeAll('dialog');
                    if (r.code == 0) {
                        reLoad();
                    }
                    layer.msg(r.msg);
                }
            })
        }, function(){

        });
    }else{
        layer.confirm('Are you sure to update &nbsp;"' + lineName + '"?', {
            shade: 0,
            title:'Notification',
            btn: ['Yes','No'] //按钮
        }, function(){
            $.ajax({
                url : prefix + '/lineDetail/update',
                type : "put",
                data:formData,
                processData: false,  // 关键点
                contentType: false,  // 关键点

                success : function(r) {
                    layer.closeAll('dialog');
                    if (r.code == 0) {
                        reLoad();
                    }
                    layer.msg(r.msg);
                }
            })
        }, function(){

        });
    }
}

function showLineDetail(lineId,lineName){
    $.ajax({
        url : prefix +  "/lineDetail/listLineDetail/"+lineId,
        type : "get",

        success : function(r) {
            if(r.list !== undefined){

                $("#lineIdSpan").text(lineId);
                $(".set_right_title").val(lineName);
                $("#selected").show();
                $("#centerDetail").show();
                $(".detailBody").show();
                $("#userList .singleApp").remove();
                $(".save_line_body").height(50);

                var lineLength =r.list.length;
                $.each(r.list, function(index,lineDetail) {
                    var exist = false;
                    $('#userList li').each(function () {
                        if ($(this).find("[id='seq']").data('mail') == lineDetail.mail) {
                            //layer.alert(lineDetail.name + lineDetail.mail +'<br>Duplicate user found. Please delete the duplicate user.');
                            exist = true;
                            lineLength--;
                            return false;
                        }
                    });
                    if (exist == false) {
                        $("#userList").append(
                            "<li class='singleApp'>" +
                            "<span id='seq' data-mail='" + lineDetail.mail + "'></span>" +
                            "<button id='appBtn' class='type_button activeHide' title='Approval' value ='1' >Appr</button>" +
                            "<button id='conBtn' class='type_button' title='Consent' value ='2'>Cons</button>" +
                            "<button id='notiBtn' class='type_button' title='Notification' value ='9'>Noti</button>" +
                            "<span id='postAppr' class='post_appr'  value ='3' style='display:none'>Post approval</span>" +
                            "<span id='paraAppr' class='para_appr'  value ='7' style='display:none'>Parallel approval</span>" +
                            "<span id='paraCon' class='para_con'  value ='4' style='display:none'>Parallel consent</span>" +
                            "<p>" + lineDetail.name+ '/' + lineDetail.job + "</p>" +
                            "<input type='hidden' id='empId' value='" + lineDetail.receiverEpid + "'/>" +
                            "<span id='operation' class='appOperation'><i class='fa fa-times'></i></span>" +
                            "<span id='arbDecision' class='appOperation' title='Arbitrary decision'><i class='fa fa-gavel'></i></span>" +
                            "<span id='editText' class='appOperation'title='Edit text'><i class='fa fa-pencil'></i></span>" +
                            "<span id='changeLine' class='appOperation' title='Change line'><i class='fa fa-user'></i></span>" +
                            "</li>"
                        );
                        switch (parseInt(lineDetail.type)) {
                            case 0:
                                $('#userList li').find('.type_button').remove();
                                $("#userList li:last-child .appOperation").remove();
                                $("#userList li:last-child #seq").after("<button id='draftBtn' class='draftBtn active' value ='0'>Draft</button>");
                                break;
                            case 1:
                                $("#userList li:last-child button:nth-of-type(1)").addClass('active');
                                break;
                            case 2:
                                $('#userList li:last-child #appBtn').removeClass('activeHide');
                                $("#userList li:last-child button:nth-of-type(2)").addClass('active');
                                break;
                            case 9:
                                $('#userList li:last-child #appBtn').removeClass('activeHide');
                                $("#userList li:last-child button:nth-of-type(3)").addClass('active');
                                $('#userList li:last-child').find('.appOperation').not('#operation').addClass('clicked').hide();
                                break;
                            case 3:
                                $('#userList li:last-child .type_button').removeClass('activeHide').hide();
                                $("#userList li:last-child #postAppr").addClass('active').show();
                                break;
                            case 7:
                                $('#userList li:last-child .type_button').hide();
                                $("#userList li:last-child #paraAppr").addClass('active').show();
                                break;
                            case 4:
                                $('#userList li:last-child .type_button').hide();
                                $("#userList li:last-child #paraCon").addClass('active').show();
                                break;
                        };
                        if(lineDetail.arbPmtYn == 'N'){
                            $("#userList li:last-child #arbDecision").addClass('clicked');
                        }
                        if(lineDetail.txtMdfyPmtYn == 'N'){
                            $("#userList li:last-child #editText").addClass('clicked');
                        }
                        if(lineDetail.pathMdfyPmtYn == 'N'){
                            $("#userList li:last-child #changeLine").addClass('clicked');
                        }
                    }
                });

                $(".save_line_body").height($(".save_line_body").height()+$("#userList li:last-child").outerHeight(true)*(lineLength));
                wrapper.totalLines = $("#userList li").length-1;
            }
            reorder();
        },
        error: function(){
            layer.msg("Server error")
        }
    });
}

function reLoad(lineId) {
	var opt = {
		query : {
            lineId : lineId,
		}
	}
	$('#dataTable').bootstrapTable('refresh', opt);
}

function reorder() {//重新排序

    var i = 0;
    var paraFirst;//第一个平行li
    var paraSeq;//平行的序号
    var meetPara = false;//遍历的是不是第一个平行li
    var liLenght = $('#userList li').length;

    $('#userList li').each(function () {
        if(i < liLenght){
            var paraAppClass = $(this).find('.para_appr').attr('class')
            var paraConClass = $(this).find('.para_con').attr('class')
            if(paraAppClass == 'para_appr active' || paraConClass == 'para_con active')
            {
                if(meetPara == false){
                    meetPara = true;
                    paraSeq = i;
                    i++;

                    if(paraAppClass == 'para_appr active'){
                        paraFirst = $(this)
                    }
                    else{
                        paraFirst = $(this)
                    }
                } else{
                    //console.log(paraFirst.nextAll().find('.para_appr.active,.para_con.active').parent('li');
                    paraFirst.after(paraFirst.nextAll().find('.para_appr.active,.para_con.active').parent('li'));
                }
                $(this).find("[id='seq']").text(paraSeq);
            }
            else
            {
                $(this).find("[id='seq']").text(i)
                i++;
            }
        }
    })
}

function cancelPara() {
    var paraAppCount= $('#userList').find('.para_appr.active').size();
    var paraConCount= $('#userList').find('.para_con.active').size();
    var totalPara = paraAppCount + paraConCount;
    if(totalPara > 0){
        var paraAppPickedCount= $('#userList .picked').find('.para_appr.active').size();
        var paraConPickedCount= $('#userList .picked').find('.para_con.active').size();
        var totalParaPicked = paraAppPickedCount + paraConPickedCount;

        if ((totalParaPicked+1) >= totalPara){//全部取消
            $('#userList').find('.activeHide').addClass('active');//取消平行时，根据为activeHide的，转化为原来的active。
            $('#userList').find('.type_button.active').show().siblings('button').show();
            $('#userList').find('.para_appr').removeClass('active').hide();
            $('#userList').find('.para_con').removeClass('active').hide();
        }
        else if((totalParaPicked+1) < totalPara  ){//只取消选中的
            $('#userList .picked').find('.activeHide').addClass('active');//取消平行时，根据为activeHide的，转化为原来的active。
            $('#userList .picked').find('.type_button.active').show().siblings('button').show();
            $('#userList .picked').find('.para_appr').removeClass('active').hide();
            $('#userList .picked').find('.para_con').removeClass('active').hide();
        }
    }
}